<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<p>笔记</p>
<h2 id="-">脚手架文件结构</h2>
<pre><code>├── node_modules
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
</code></pre><h2 id="-vue">关于不同版本的 Vue</h2>
<ol>
<li>vue.js 与 vue.runtime.xxx.js 的区别：<ol>
<li>vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器。</li>
<li>vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能；没有模板解析器。</li>
</ol>
</li>
<li>因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 这个配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容。</li>
</ol>
<h2 id="vue-config-js-">vue.config.js 配置文件</h2>
<ol>
<li>使用 vue inspect &gt; output.js 可以查看到 Vue 脚手架的默认配置。</li>
<li>使用 vue.config.js 可以对脚手架进行个性化定制，详情见：<a href="https://cli.vuejs.org/zh">https://cli.vuejs.org/zh</a></li>
</ol>
<h2 id="ref-">ref 属性</h2>
<ol>
<li>被用来给元素或子组件注册引用信息（id 的替代者）</li>
<li>应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）</li>
<li>使用方式：<ol>
<li>打标识：<code>&lt;h1 ref=&quot;xxx&quot;&gt;.....&lt;/h1&gt;</code> 或 <code>&lt;School ref=&quot;xxx&quot;&gt;&lt;/School&gt;</code></li>
<li>获取：<code>this.$refs.xxx</code></li>
</ol>
</li>
</ol>
<h2 id="props-">props 配置项</h2>
<ol>
<li><p>功能：让组件接收外部传过来的数据</p>
</li>
<li><p>传递数据：<code>&lt;Demo name=&quot;xxx&quot;/&gt;</code></p>
</li>
<li><p>接收数据：</p>
<ol>
<li><p>第一种方式（只接收）：<code>props:[&#39;name&#39;]</code></p>
</li>
<li><p>第二种方式（限制类型）：<code>props:{name:String}</code></p>
</li>
<li><p>第三种方式（限制类型、限制必要性、指定默认值）：</p>
<pre><code class="lang-js">props:{
    name:{
    type:String, //类型
    required:true, //必要性
    default:&#39;老王&#39; //默认值
    }
}
</code></pre>
</li>
</ol>
<blockquote>
<p>备注：props 是只读的，Vue 底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props 的内容到 data 中一份，然后去修改 data 中的数据。</p>
</blockquote>
</li>
</ol>
<h2 id="mixin-">mixin(混入)</h2>
<ol>
<li><p>功能：可以把多个组件共用的配置提取成一个混入对象</p>
</li>
<li><p>使用方式：</p>
<p>第一步定义混合：</p>
<pre><code>{
    data(){....},
    methods:{....}
    ....
}
</code></pre><p>第二步使用混入：</p>
<p>​ 全局混入：<code>Vue.mixin(xxx)</code>
​ 局部混入：<code>mixins:[&#39;xxx&#39;]</code></p>
</li>
</ol>
<h2 id="-">插件</h2>
<ol>
<li><p>功能：用于增强 Vue</p>
</li>
<li><p>本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。</p>
</li>
<li><p>定义插件：</p>
<pre><code class="lang-js">对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
</code></pre>
</li>
<li><p>使用插件：<code>Vue.use()</code></p>
</li>
</ol>
<h2 id="-todolist-">总结 TodoList 案例</h2>
<ol>
<li><p>组件化编码流程：</p>
<p>​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与 html 元素冲突。</p>
<p>​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：</p>
<p>​ 1).一个组件在用：放在组件自身即可。</p>
<p>​ 2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。</p>
<p>​ (3).实现交互：从绑定事件开始。</p>
</li>
<li><p>props 适用于：</p>
<p>​ (1).父组件 ==&gt; 子组件 通信</p>
<p>​ (2).子组件 ==&gt; 父组件 通信（要求父先给子一个函数）</p>
</li>
<li><p>使用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！</p>
</li>
<li><p>props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做。</p>
</li>
</ol>
<h2 id="-globaleventbus-">全局事件总线（GlobalEventBus）</h2>
<ol>
<li><p>一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。</p>
</li>
<li><p>安装全局事件总线：</p>
<pre><code class="lang-js">new Vue({
    ......
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    },
    ......
})
</code></pre>
</li>
<li><p>使用事件总线：</p>
<ol>
<li><p>接收数据：A 组件想接收数据，则在 A 组件中给$bus 绑定自定义事件，事件的<span style="color:red">回调留在 A 组件自身。</span></p>
<pre><code class="lang-js">methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on(&#39;xxxx&#39;,this.demo)
}
</code></pre>
</li>
<li><p>提供数据：<code>this.$bus.$emit(&#39;xxxx&#39;,数据)</code></p>
</li>
</ol>
</li>
<li><p>最好在 beforeDestroy 钩子中，用$off 去解绑<span style="color:red">当前组件所用到的</span>事件。</p>
</li>
</ol>
<h2 id="-pubsub-">消息订阅与发布（pubsub）</h2>
<ol>
<li><p>一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。</p>
</li>
<li><p>使用步骤：</p>
<ol>
<li><p>安装 pubsub：<code>npm i pubsub-js</code></p>
</li>
<li><p>引入: <code>import pubsub from &#39;pubsub-js&#39;</code></p>
</li>
<li><p>接收数据：A 组件想接收数据，则在 A 组件中订阅消息，订阅的<span style="color:red">回调留在 A 组件自身。</span></p>
<pre><code class="lang-js">methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe(&#39;xxx&#39;,this.demo) //订阅消息
}
</code></pre>
</li>
<li><p>提供数据：<code>pubsub.publish(&#39;xxx&#39;,数据)</code></p>
</li>
<li><p>最好在 beforeDestroy 钩子中，用<code>PubSub.unsubscribe(pid)</code>去<span style="color:red">取消订阅。</span></p>
</li>
</ol>
</li>
</ol>
<h2 id="vue-">Vue 封装的过度与动画</h2>
<ol>
<li><p>作用：在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名。</p>
</li>
<li><p>图示：<img src="https://cn.vuejs.org/images/transition.png" style="width:60%" /></p>
</li>
<li><p>写法：</p>
<ol>
<li><p>准备好样式：</p>
<ul>
<li>元素进入的样式：<ol>
<li>v-enter：进入的起点</li>
<li>v-enter-active：进入过程中</li>
<li>v-enter-to：进入的终点</li>
</ol>
</li>
<li>元素离开的样式：<ol>
<li>v-leave：离开的起点</li>
<li>v-leave-active：离开过程中</li>
<li>v-leave-to：离开的终点</li>
</ol>
</li>
</ul>
</li>
<li><p>使用<code>&lt;transition&gt;</code>包裹要过度的元素，并配置 name 属性：</p>
<pre><code class="lang-vue">&lt;transition name=&quot;hello&quot;&gt;
    &lt;h1 v-show=&quot;isShow&quot;&gt;你好啊！&lt;/h1&gt;
&lt;/transition&gt;
</code></pre>
</li>
<li><p>备注：若有多个元素需要过度，则需要使用：<code>&lt;transition-group&gt;</code>，且每个元素都要指定<code>key</code>值。</p>
</li>
</ol>
</li>
</ol>
<h2 id="vue-">vue 脚手架配置代理</h2>
<h3 id="-">方法一</h3>
<p>​ 在 vue.config.js 中添加如下配置：</p>
<pre><code class="lang-js">devServer: {
  proxy: &quot;http://localhost:5000&quot;;
}
</code></pre>
<p>说明：</p>
<ol>
<li>优点：配置简单，请求资源时直接发给前端（8080）即可。</li>
<li>缺点：不能配置多个代理，不能灵活的控制请求是否走代理。</li>
<li>工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）</li>
</ol>
<h3 id="-">方法二</h3>
<p>​ 编写 vue.config.js 配置具体代理规则：</p>
<pre><code class="lang-js">module.exports = {
  devServer: {
    proxy: {
      &quot;/api1&quot;: {
        // 匹配所有以 &#39;/api1&#39;开头的请求路径
        target: &quot;http://localhost:5000&quot;, // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { &quot;^/api1&quot;: &quot;&quot; },
      },
      &quot;/api2&quot;: {
        // 匹配所有以 &#39;/api2&#39;开头的请求路径
        target: &quot;http://localhost:5001&quot;, // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { &quot;^/api2&quot;: &quot;&quot; },
      },
    },
  },
};
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/
</code></pre>
<h2 id="-">插槽</h2>
<p>说明：</p>
<ol>
<li>优点：可以配置多个代理，且可以灵活的控制请求是否走代理。</li>
<li>缺点：配置略微繁琐，请求资源时必须加前缀。</li>
</ol>
<p>父组件中：</p>
<pre><code class="lang-js">&lt;Category&gt;
&lt;template scope=&quot;scopeData&quot;&gt;
&lt;!-- 生成的是ul列表 --&gt;
&lt;ul&gt;
&lt;li v-for=&quot;g in scopeData.games&quot; :key=&quot;g&quot;&gt;{{g}}&lt;/li&gt;
&lt;/ul&gt;
&lt;/template&gt;
&lt;/Category&gt;

&lt;Category&gt;
            &lt;template slot-scope=&quot;scopeData&quot;&gt;
                &lt;!-- 生成的是h4标题 --&gt;
                &lt;h4 v-for=&quot;g in scopeData.games&quot; :key=&quot;g&quot;&gt;{{g}}&lt;/h4&gt;
            &lt;/template&gt;
        &lt;/Category&gt;

子组件中：
&lt;template&gt;
  &lt;div&gt;
    &lt;slot :games=&quot;games&quot;&gt;&lt;/slot&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  name: &quot;Category&quot;,
  props: [&quot;title&quot;],
  //数据在子组件自身
  data() {
    return {
      games: [&quot;红色警戒&quot;, &quot;穿越火线&quot;, &quot;劲舞团&quot;, &quot;超级玛丽&quot;],
    };
  },
};
&lt;/script&gt;
</code></pre>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>